<template>
  <div class="tp bigTableStyle">
    <div class="left">
      <el-tree ref="taskT" :data="TreeDatatp" :props="defaultProps" icon-class="custom"></el-tree>
    </div>
    <div class="right">
      <div class="form-box">
        <el-form ref="form" :model="form" label-width="1.2rem">
          <el-row>
            <el-col :span="10">
              <el-form-item label="监测时间:">
                <el-date-picker
                  v-model="form.name"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width:100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2" :offset="1">
              <el-button class="btn" type="primary" @click="initsearch">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          :row-class-name="tableRowClassName"
          style="width: 100%"
          border
          height="100%"
        >
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column
            prop="monitorTime"
            :show-overflow-tooltip="true"
            width="300"
            label="文件名称"
          ></el-table-column>
          <el-table-column prop="value" label="文件时间" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="state" :show-overflow-tooltip="true" label="文件状态"></el-table-column>
        </el-table>
      </div>
      <div class="btn-box">
        <el-button
          class="btn"
          type="primary"
          v-for="(item,index) in btnLit"
          :key="index"
        >{{item.name}}</el-button>
      </div>
      <div class="tupu"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import axios from "axios";
@Component
export default class extends Vue {
  @Prop() treeList!: any;
  @Prop() equipment!: any;
  public defaultProps = {
    label: "name",
    children: "childrens",
  };
  TreeDatatp = [];
  form = {
    name: [],
  };
  tableData = [];
  jgdyOptions = [];
  btnLit = [{ name: "测试1" }, { name: "测试2" }];
  initsearch() {}
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //装置list数
  list() {
    // 过滤遥测
    var tableData = this.treeList.filter((v) => {
      return v.remoteType !== "2";
    });
    if (this.equipment) {
      var dataTree = JSON.parse(JSON.stringify(this.equipment));
      var MydataTree = [];
      dataTree.map((v) => {
        var obj1: any = {};
        obj1.name = v.bayName;
        obj1.bayId = v.bayId;
        obj1.id = v.id;
        obj1.children = [];
        obj1.myType = "jg";
        tableData.map((p) => {
          if (v.bayId == p.bayId) {
            var obj2: any = {};
            obj1.bayName = p.bayName;
            obj2.name = p.name;
            obj2.bayId = p.bayId;
            obj2.id = p.id;
            obj2.type = p.type;
            obj2.myType = "dw";
            obj1.children.push(obj2);
          }
        });
        MydataTree.push(obj1);
        this.TreeDatatp = MydataTree;
      });
      // console.log(this.TreeDatatp);
    }
    console.log(121, MydataTree, "asdsadasdasdasd");
  }

  mounted() {
    this.list();
  }
}
</script>

<style lang="scss" scoped>
.tp {
  width: 100%;
  height: 5.5rem;
  display: flex;
  .left {
    height: 100%;
    width: 25%;
    overflow-y: auto;
  }
  .right {
    margin-left: 0.1rem;
    height: 100%;
    width: calc(80% - 0.1rem);
  }
  .form-box {
    width: 100%;
    height: 0.62rem;
    overflow: auto;
  }
  .table-box {
    width: 100%;
    height: calc(100% - 3.62rem);
    overflow: auto;
  }
  .btn-box {
    width: 100%;
    height: 0.3rem;
    margin: 0.1rem 0;
    display: flex;
    overflow-x: auto;
    .btn {
      margin-right: 0.1rem;
      height: 100%;
    }
  }
  .tupu {
    background-color: #fff;
    height: 2.5rem;
  }
}
</style>

